<%--
  Created by IntelliJ IDEA.
  User: MJ
  Date: 2021/10/12
  Time: 18:59
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="../../js/jquery-3.6.0.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/menustyle.css">

    <style type="text/css">
        .pagenum {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
    </style>


</head>
<body>


<div class="container-fluid">
    <div class="row-fluid clearfix">
        <!-- 导航栏 -->
        <div id="sidebar">
            <header>
                <a href="#">后台管理</a>
            </header>
            <ul class="nav">
                <li>
                    <a href="${pageContext.request.contextPath}/admin/allReader">
                        读者管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        出入库管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        借阅管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        分类管理
                    </a>
                </li>
            </ul>
        </div>

        <!-- 正文 -->
        <div id="content">
            <div class="container-fluid" style="margin-left: 250px">
                <div class="row-fluid clearfix">
                    <div class="col-md-12 column">
                        <div class="page-header">
                            <h1>
                                <small>类型管理</small>
                            </h1>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 column">
                        <a style="float: left;" class="btn btn-primary"
                           href="${pageContext.request.contextPath}/type/allType">刷新</a>
                        <form style="float: left;" action="${pageContext.request.contextPath}/type/addType"
                              method="post">
                            <input style="margin-left: 100px" type="text" name="addname">
                            <input class="btn btn-primary" type="submit" value="添加">
                        </form>


                        <div style="padding-top: 7px;margin-left: 900px">
                            <span>所拥有图书类型：</span>
                            <span id="count">${requestScope.get('count')}</span>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="col-md-12 column">
                        <table class="table table-hover table-striped">
                            <thead>
                            <tr>
                                <th><a style="text-decoration:none;color: black" href="javascript:change1()">
                                    <input type="hidden" value="upAndDown" id="order1">
                                    类型编号<img id="imgId1" src="../../static/img/upAndDown.jpg" alt="up"/></a></th>
                                <th>类型名字</th>
                                <th><a style="text-decoration:none;color: black" href="javascript:change2()">
                                    <input type="hidden" value="upAndDown" id="order2">
                                    所拥有书籍数量<img id="imgId2" src="../../static/img/upAndDown.jpg" alt="up"/></a></th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody id="tb">
                            <c:forEach var="type" items="${requestScope.get('list')}">
                                <tr>
                                    <td>${type.getTypeid()}</td>
                                    <td><a style="text-decoration:none"
                                           href="${pageContext.request.contextPath}/queryBook?detail=''&type=${type.getTypename()}">${type.getTypename()}</a>
                                    </td>
                                    <td>${type.getTotal()}</td>
                                    <td>
                                        <a href="${pageContext.request.contextPath}/type/edit/${type.getTypeid()}">更改</a>
                                        |
                                        <a onclick='return confirm("确定删除该记录？")'
                                           href="${pageContext.request.contextPath}/type/del/${type.getTypeid()}">删除</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>


                        <div class="col-sm-offset-3 col-sm-5">
                            <ul class="pagination">
                                <li><a href="JavaScript:lastpage()">上一页</a></li>
                                <li><input id="p1" class="pagenum" type="button" value="1"></li>
                                <li><input id="p2" class="pagenum" type="button" value="2"></li>
                                <li><input id="p3" class="pagenum" type="button" value="3"></li>
                                <li><input id="p4" class="pagenum" type="button" value="4"></li>
                                <li><input id="p5" class="pagenum" type="button" value="5"></li>

                                <li><a href="JavaScript:nextpage()">下一页</a></li>
                                <li>
                                    <label style="margin-top: 7px">
                                        <select class="selectpicker" id="size">
                                            <option value="3">3</option>
                                            <option value="5" selected="selected">5</option>
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                        </select>
                                    </label>
                                    <font style="margin-top: 7px">每页</font>
                                </li>
                            </ul>

                        </div>
                        <font>当前页码：<input id="page" style="width: 40px " disabled="disabled" value="1"></font>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


</body>

<script type="text/javascript">

    $("a.mess").click(function () {
        if (confirm("确实要删除吗?")) {
        } else {
            ajax4();
        }
    })

    method = 'typeid';
    order = 'asc';
    size = $("#size").val();
    page = $("#page").val();
    maxpage = Math.ceil($("#count").text() / size);

    function setpage() {

        if (maxpage < 5) {
            for (let i = maxpage + 1; i <= 5; i++)
                $("#p" + i).attr("type", "hidden");
            return;
        }
        //页面在1 2 3  以及最后两页之间切换  不会让按钮消失
        // 3 4 5 6 7
        /*if (page === 1 || page === 2 || page === 3) {
        }*/
        if (parseInt(maxpage - page) <= 2) {
            for (let i = 1; i <= 5; i++)
                $("#p" + i).attr("value", maxpage - 5 + i);
        }
    }

    function resetpage() {
        for (let i = 1; i <= 5; i++)
            $("#p" + i).attr("type", "button");
    }

    $(document).ready(function () {
        setpage();
    })

    //上一页
    function lastpage() {
        var nowpage = page;
        if (nowpage === 1) {
        } else {
            page--;
            ajax4();
        }
    }

    //下一页
    function nextpage() {
        var nowpage = page;
        if (nowpage < maxpage) {
            page++;
            ajax4();
        }
    }

    //not finished
    //size改变
    $("#size").change(function () {
        size = $("#size").val();
        page = 1;
        maxpage = Math.ceil($("#count").text() / size);
        ajax4();
    })

    //改变页码
    $("input.pagenum").click(function () {
        page = $(this).val();
        ajax4();
    })

    //修改页面的页码：
    function chagngePage() {
        $("#page").val(page);
    }


    //typeid的升序、降序
    function change1() {
        $('#order2').val('upAndDown');
        $('#imgId2').attr('src', '../../static/img/upAndDown.jpg');
        var order1 = $('#order1').val();
        if (order1 === 'upAndDown' || order1 === 'desc') {
            $('#order1').val('asc');
            $('#imgId1').attr('src', '../../static/img/asc.jpg');
            method = 'typeid';
            order = 'asc';
            ajax4(method, order, page, size);

        } else {
            $('#order1').attr('value', 'desc');
            $('#imgId1').attr('src', '../../static/img/desc.jpg');
            method = 'typeid';
            order = 'desc';
            ajax4(method, order, page, size);
        }

    }

    //total的升序 降序
    function change2() {
        $('#order1').val('upAndDown');
        $('#imgId1').attr('src', '../../static/img/upAndDown.jpg');
        var order2 = $('#order2').val();
        if (order2 === 'upAndDown' || order2 === 'desc') {
            $('#order2').val('asc');
            $('#imgId2').attr('src', '../../static/img/asc.jpg');
            method = 'total';
            order = 'asc';
            ajax4();
        } else {
            $('#order2').val('desc');
            $('#imgId2').attr('src', '../../static/img/desc.jpg');
            method = 'total';
            order = 'desc';
            ajax4();
        }
    }


    function ajax4() {
        $.ajax({
            type: "POST",
            url: "/type/page/" + method + "/" + order + "/" + page + "/" + size,
            dataType: "json",
            async: false,
            success: function (data) {
                resetpage();
                setpage();
                chagngePage();
                updateHTML(data);
            }
            //注意：这里不能加下面这行，否则数据会传不到后台
            //contentType:'application/json;charset=UTF-8',
        });
    }

    function updateHTML(data) {

        var rows = data.rows;
        var str = "";
        for (var key in rows) {
            if (rows.hasOwnProperty(key)) {
                var text = rows[key];
                str += "<tr>\n" +
                    "                <td>" + text['typeid'] + "</td>\n" +
                    "                <td><a style=\"text-decoration:none\" href=\"${pageContext.request.contextPath}/queryBook?detail=''&type=" + text['typename'] + "\">" + text['typename'] + "</a></td>\n" +
                    "                <td>" + text['total'] + "</td>\n" +
                    "                <td>\n" +
                    "                    <a href=\"${pageContext.request.contextPath}/type/edit/" + text['typeid'] + "\">更改</a>\n" +
                    "                    |\n" +
                    "                    <a  onclick='return confirm(\"确定删除该记录？\")' href=\"${pageContext.request.contextPath}/type/del/" + text['typeid'] + "\">删除</a>\n" +
                    "                </td>\n" +
                    "            </tr>";
            }
        }
        $("#tb").html(str);
    }


</script>

</html>
